<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yaodian100.core.common.utils.ServerValue"%>

<%@ taglib prefix="pu" uri="/WEB-INF/tld/pageutil.tld"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%@ include file="/taglibs.jsp"%>

<c-rt:set var="midContextPath" value="<%=ServerValue.getMidContextPath()%>" />
<c-rt:set var="imgDomain" value="<%=ServerValue.getImgDomain()%>" />

<script src="${midContextPath}/js/jquery.form.js" type="text/javascript" charset="UTF-8"></script>

<script language="javascript">
	$().ready(function(){
		var categorySelectVal="${categorySelect}";
		var elementSelectVal="${elementSelect}";
		var attributeSelectVal="${attributeSelect}";
		var itemSelectVal="${itemSelect}";
		var unitSelectVal="${unitSelect}";
		var listSelectVal="${listSelect}";
		
		//分类下拉选项
		//第0层
		if(categorySelectVal!="" && categorySelectVal!="-1"){
			$("#categorySelect").attr("value",categorySelectVal);
			categorySelect(categorySelectVal,false);
		}
		
		$("#categorySelect").change(function(){
			categorySelect($(this).val(),true);
		});
		
		function categorySelect(selCategoryId,onChange){
			$.ajax({
				url: '<%=ServerValue.getMidContextPath()%>/productRC/loadSelBar.do',
				type: 'post',
				dataType: 'json',
				data: {selCategoryId:selCategoryId, callback: 'selectCallback'},
				cache: false,
				beforeSend: function() {
					$("#loadingImg").dialog("open");
					$('#elementSelect').find('option[value!=-1]').remove().end();
					$('#attributeSelect').find('option[value!=-1]').remove().end();
					$('#itemSelect').find('option[value!=-1]').remove().end();
					$('#unitSelect').find('option[value!=-1]').remove().end();
					$('#listSelect').find('option[value!=-1]').remove().end();
				},
				success: function(strData){
					selectCallback(strData, 'elementSelect');
					$("#loadingImg").dialog("close");
					
					if(!onChange){
						var size=$("#elementSelect option[value="+elementSelectVal+"]").size();
						if(elementSelectVal!="" && elementSelectVal!="-1" && size>0){
							$("#elementSelect").attr("value",elementSelectVal);
							elementSelect(elementSelectVal,false);
						}
					}
				}
			});
		}
		
		//第1层
		$("#elementSelect").change(function(){
			elementSelect($(this).val(),true);
		});
		
		function elementSelect(selCategoryId,onChange){
			$.ajax({
				url: '<%=ServerValue.getMidContextPath()%>/productRC/loadSelBar.do',
				type: 'post',
				dataType: 'json',
				data: {selCategoryId:selCategoryId, callback: 'selectCallback'},
				cache: false,
				beforeSend: function() {
					$("#loadingImg").dialog("open");
					$('#attributeSelect').find('option[value!=-1]').remove().end();
					$('#itemSelect').find('option[value!=-1]').remove().end();
					$('#unitSelect').find('option[value!=-1]').remove().end();
					$('#listSelect').find('option[value!=-1]').remove().end();
				},
				success: function(strData){
					selectCallback(strData, 'attributeSelect');
					$("#loadingImg").dialog("close");
					
					if(!onChange){
						var size=$("#attributeSelect option[value="+attributeSelectVal+"]").size();
						if(attributeSelectVal!="" && attributeSelectVal!="-1" && size>0){
							$("#attributeSelect").attr("value",attributeSelectVal);
							attributeSelect(attributeSelectVal,false);
						}
					}
				}
			});
		}
		
		//第2层
		$("#attributeSelect").change(function(){
			attributeSelect($(this).val(),true);
		});
		
		function attributeSelect(selCategoryId,onChange){
			$.ajax({
				url: '<%=ServerValue.getMidContextPath()%>/productRC/loadSelBar.do',
				type: 'post',
				dataType: 'json',
				data: {selCategoryId:selCategoryId, callback: 'selectCallback'},
				cache: false,
				beforeSend: function() {
					$("#loadingImg").dialog("open");
					$('#itemSelect').find('option[value!=-1]').remove().end();
					$('#unitSelect').find('option[value!=-1]').remove().end();
					$('#listSelect').find('option[value!=-1]').remove().end();
				},
				success: function(strData){
					selectCallback(strData, 'itemSelect');
					$("#loadingImg").dialog("close");
					
					if(!onChange){
						var size=$("#itemSelect option[value="+itemSelectVal+"]").size();
						if(itemSelectVal!="" && itemSelectVal!="-1" && size>0){
							$("#itemSelect").attr("value",itemSelectVal);
							itemSelect(itemSelectVal,false);
						}
					}
				}
			});
		}
		
		//第3层
		$("#itemSelect").change(function(){
			itemSelect($(this).val(),true);
		});
		
		function itemSelect(selCategoryId,onChange){
			$.ajax({
				url: '<%=ServerValue.getMidContextPath()%>/productRC/loadSelBar.do',
				type: 'post',
				dataType: 'json',
				data: {selCategoryId:selCategoryId, callback: 'selectCallback'},
				cache: false,
				beforeSend: function() {
					$("#loadingImg").dialog("open");
					$('#unitSelect').find('option[value!=-1]').remove().end();
					$('#listSelect').find('option[value!=-1]').remove().end();
				},
				success: function(strData){
					selectCallback(strData, 'unitSelect');
					$("#loadingImg").dialog("close");
					
					if(!onChange){
						var size=$("#unitSelect option[value="+unitSelectVal+"]").size();
						if(unitSelectVal!="" && unitSelectVal!="-1" && size>0){
							$("#unitSelect").attr("value",unitSelectVal);
							unitSelect(unitSelectVal,false);
						}
					}
				}
			});
		}
		
		//第4层
		$("#unitSelect").change(function(){
			unitSelect($(this).val(),true);
		});
		
		function unitSelect(selCategoryId,onChange){
			$.ajax({
				url: '<%=ServerValue.getMidContextPath()%>/productRC/loadSelBar.do',
				type: 'post',
				dataType: 'json',
				data: {selCategoryId:selCategoryId, callback: 'selectCallback'},
				cache: false,
				beforeSend: function() {
					$("#loadingImg").dialog("open");
					$('#listSelect').find('option[value!=-1]').remove().end();
				},
				success: function(strData){
					selectCallback(strData, 'listSelect');
					$("#loadingImg").dialog("close");
					
					if(!onChange){
						var size=$("#listSelect option[value="+listSelectVal+"]").size();
						if(listSelectVal!="" && listSelectVal!="-1" && size>0){
							$("#listSelect").attr("value",listSelectVal);
						}
					}
				}
			});
		}
		
		function selectCallback(categories, reloadArea){
			jQuery.each(categories, function(index , value){
				var data = value.split(':');
				$('#'+reloadArea).append($("<option></option>").attr("value",data[0]).text(data[1]+"("+data[0]+")"));
			});
		}
		
		$("#cbAll").click(function(){
			$("input[id*=cb_]").attr("checked",$("#cbAll").attr("checked"));
		});
		
		$("#loadingImg").dialog({
			bgiframe:true,
			modal:true,
			autoOpen:false
		});
		
		$("#productSelectWindow").dialog({
			width:600,
			bgiframe:true,
			modal:true,
			autoOpen:false,
			close: function(){
				
			}
		});
		
		$("#searchPrdPC").click(function(){
			if($("#categorySelect").val()==-1){
				alert("请至少选择馆类别的分类项目");
			}else{
				var cateId;
				if($("#listSelect").val()!=-1){
					cateId=$("#listSelect").val();
				}else if($("#unitSelect").val()!=-1){
					cateId=$("#unitSelect").val();
				}else if($("#itemSelect").val()!=-1){
					cateId=$("#itemSelect").val();
				}else if($("#attributeSelect").val()!=-1){
					cateId=$("#attributeSelect").val();
				}else if($("#elementSelect").val()!=-1){
					cateId=$("#elementSelect").val();
				}else if($("#categorySelect").val()!=-1){
					cateId=$("#categorySelect").val();
				}
				
				$("#categoryId").attr("value",cateId);
				$("#productSearchForm").submit();
			}
			
		});
		
		$("#addProduct").click(function(){
			if($("#categoryId").attr("value")==""){
				alert("请先查询欲加入商品的馆长推荐分类");
			}else{
				insertProduct();
			}
		});
		
		$("#deleteBtn").click(function(){
			if($("input[id*=cb_]:checked").length==0){
				alert("请勾选要删除的项目");
			}else{
				/*
				$("#productForm").ajaxSubmit({
					url:'${midContextPath}/productRC/delete.do',
					cache:false,
					type:'post',
					beforeSend:function(){
						$("#loadingImg").dialog('open');
					},
					success:function(strData){
						$("input[id*=cb_]:checked").each(function(){
							$(this).parents("tr").remove();
						});
						$("#countSpan").html($("input[id*=id_]").size());
						
						$("#loadingImg").dialog('close');
					}
				});
				*/
				$("#productForm").attr("action","${midContextPath}/productRC/delete.do");
				$("#productForm").submit();
			}
		});
		
		$("#draftBtn").click(function(){
			$("#productForm").attr("action","${midContextPath}/productRC/draft.do");
			$("#productForm").submit();
		});
		
		$("#saveBtn").click(function(){
			if(checkSubmit()){
				$("#productForm").attr("action","${midContextPath}/productRC/save.do");
				$("#productForm").submit();
			}
		});
	});
	
	function insertProduct(){
		var loadingDialog=$("#loadingImg");
		var productSelectWindow=$("#productSelectWindow");
		var categoryId=$("#categoryId").attr("value");
		var categoryName=$("#categoryName").attr("value");
		
		loadingDialog.dialog('open');
		
		$.ajax({
			url:"${midContextPath}/productRC/productSearch.do",
			type:'post',
			data:{
				categoryId:categoryId,
				categoryName:categoryName
			},
			cache: false,
			beforeSend:function(){
				loadingDialog.dialog('open');
			},
			success:function(strData){
				loadingDialog.dialog('close');
				productSelectWindow.html(strData);
				productSelectWindow.dialog('open');
			}
		});
	}
	
	function checkSubmit(){
		var sortWeightOK=true;
		$("input[id*=sortWeight_]").each(function(){
			if(this.value==""){
				alert("请输入排序编号");
				this.focus();
				
				sortWeightOK=false;
				return false;
			}
		});
		if(!sortWeightOK) return sortWeightOK;
		
		var advTitleOK=true;
		$("input[id*=advTitle_]").each(function(){
			if(this.value.replace(/^\s+|\s+$/g,"")==""){
				alert("请输入圆标标题");
				this.focus();
				
				advTitleOK=false;
				return false;
			}
		});
		if(!advTitleOK) return advTitleOK;
		
		return true;
	}
	
	var sortWeightType="asc";
	function sortWeight() {
		if(sortWeightType=="asc"){
			sortWeightType="desc";
			$("#sortWeight_tag").html("▼");
		}else{
			sortWeightType="asc";
			$("#sortWeight_tag").html("▲");
		}
		
		var mylist = $("#sortTbody tr").clone(true).get();
		mylist.sort(function(a,b){
			var compA = parseInt($(a).find('input[id*=sortWeight_]').val());
			var compB = parseInt($(b).find('input[id*=sortWeight_]').val());
			if(sortWeightType=="asc"){
				return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
			}else{
				return (compA > compB) ? -1 : (compA < compB) ? 1 : 0;
			}
		});
		
		$("#sortTbody tr").remove();
		$("#sortTbody").append($(mylist));
	}
	
	var sortOrderType="asc";
	function sortOrder() {
		if(sortOrderType=="asc"){
			sortOrderType="desc";
			$("#sortOrder_tag").html("▼");
		}else{
			sortOrderType="asc";
			$("#sortOrder_tag").html("▲");
		}
		
		var mylist = $("#sortTbody tr").clone(true).get();
		mylist.sort(function(a,b){
			var compA = parseInt($(a).find('td[id*=sortOrder_]').html());
			var compB = parseInt($(b).find('td[id*=sortOrder_]').html());
			if(sortOrderType=="asc"){
				return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
			}else{
				return (compA > compB) ? -1 : (compA < compB) ? 1 : 0;
			}
		});
		
		$("#sortTbody tr").remove();
		$("#sortTbody").append($(mylist));
	}
</script>

<h1>馆长推荐</h1>
<div class="data-form">
	<form id="productSearchForm" name="productSearchForm" action="${midContextPath}/productRC/list.do" method="post">
		<input type="hidden" name="categoryId" id="categoryId" value="${categoryId}" />
		<input type="hidden" name="categoryName" id="categoryName" value="${categoryName}" />
		<b>馆类别：</b>
		<select id="categorySelect" name="categorySelect">
			<option value="-1">请选择</option>
		<c-rt:forEach items="${categoryRoot}" var="category">
			<option value="${category.id}">${category.name}(${category.id})</option>
		</c-rt:forEach>
		</select>
		<b>&nbsp;分类1：</b>
		<select id="elementSelect" name="elementSelect">
			<option value="-1">请选择</option>
		</select>
		<b>&nbsp;分类2：</b>
		<select id="attributeSelect" name="attributeSelect">
			<option value="-1">请选择</option>
		</select>
		<br />
		<b>&nbsp;分类3：</b>
		<select id="itemSelect" name="itemSelect">
			<option value="-1">请选择</option>
		</select>
		<b>&nbsp;分类4：</b>
		<select id="unitSelect" name="unitSelect">
			<option value="-1">请选择</option>
		</select>
		<b>&nbsp;分类5：</b>
		<select id="listSelect" name="listSelect">
			<option value="-1">请选择</option>
		</select>
		<br />
		<input type="button" id="searchPrdPC" value="查询" />&nbsp;<input type="button" id="addProduct" value="加入商品" />
	</form>
	
	<span style="color:brown">若变更商品顺序必须先[保存排序编号]，此时前台商品顺序并不会改变，必须再点击[发布顺序]才完成修改</span><br />
</div>

<br />

<form id="productForm" name="productForm" method="post">
	<input type="checkbox" id="cbAll" />全選<br />
	<c-rt:if test="${categoryId!=null && categoryId!='' && categoryId!=-1}">
		<span style="color:red">目前查询分类：${categoryName}(${categoryId})</span>&nbsp;&nbsp;
	</c-rt:if>
	
	共： <span id="countSpan">${fn:length(productRCList)}</span> 笔
	<table class="tablesorter tb-1" width="100%">
		<thead>
			<tr>
				<th>删除</th>
				<th><a onclick="javascript:sortWeight();" style="cursor:pointer;">排序编号<span id="sortWeight_tag">▲</span></a></th>
				<th><a onclick="javascript:sortOrder();" style="cursor:pointer;">显示顺序<span id="sortOrder_tag">▲</span></a></th>
				<th>商品图</th>
				<th>圆标<span style="color:red">(限4个字)</span></th>
				<th>商品编号</th>
				<th>商品名称</th>
			</tr>
		</thead>
		
		<tbody id="sortTbody">
		<c-rt:forEach items="${productRCList}" var="productRC" varStatus="rows_index">
			<tr>
				<td>
					<input type="checkbox" id="cb_${rows_index.index}" name="delPrdRCIds" value="${productRC.id}" />
					<input type="hidden" name="id_${rows_index.index}" id="id_${rows_index.index}" value="${productRC.id}" />
					<input type="hidden" name="prdCateId_${rows_index.index}" value="${productRC.categoryId}" />
					<input type="hidden" name="categoryPath_${rows_index.index}" id="categoryPath_${rows_index.index}" value="${productRC.categoryPath}" />
					<input type="hidden" name="rowsIndex_${rows_index.index}" id="rowsIndex_${rows_index.index}" value="${rows_index.index}" />
					<input type="hidden" name="promoteName_${rows_index.index}" value="${productRC.promoteName}" />
					<input type="hidden" name="shelfPrice_${rows_index.index}" value="${productRC.shelfPrice}" />
					<input type="hidden" name="listPrice_${rows_index.index}" value="${productRC.listPrice}" />
				</td>
				<td>
					<input type="text" id="sortWeight_${rows_index.index}" name="sortWeight_${rows_index.index}" value="${productRC.sortWeight==null?500:productRC.sortWeight}" maxlength="5" size="5" onkeyup="value=value.replace(/[^\d]/g,&#39;&#39;)" onbeforepaste="clipboardData.setData(&#39;text&#39;,clipboardData.getData(&#39;text&#39;).replace(/[^\d]/g,&#39;&#39;))" />
				</td>
				<td id="sortOrder_${rows_index.index}">${productRC.sortOrder}</td>
				<td><img src="${imgDomain}/PImg/${pu:substring(productRC.productId,0,4)}/${productRC.productId}/${productRC.productId}_m75.jpg" onError="this.src='/PImg/blank_75.gif'" width="75" height="75" /></td>
				<td><input name="advTitle_${rows_index.index}" id="advTitle_${rows_index.index}" type="text" size="4" value="${productRC.advTitle}" maxlength="4" /><br/><input type="radio" name="advStyle_${rows_index.index}" value="0" ${productRC.advStyle==0?'checked="checked"':''} />红<input type="radio" name="advStyle_${rows_index.index}" value="1" ${productRC.advStyle==1?'checked="checked"':''} />绿</td>
				<td>
					${productRC.productId}
					<input type="hidden" name="productId_${rows_index.index}" id="productId_${rows_index.index}" value="${productRC.productId}" />
				</td>
				<td>
					${productRC.productName}
					<input type="hidden" name="productName_${rows_index.index}" value="${productRC.productName}" />
				</td>
			</tr>
		</c-rt:forEach>
		</tbody>
		<tbody>
			<tr>
				<td><input type="button" name="deleteBtn" id="deleteBtn" value="删除" /></td>
				<td><input type="button" name="draftBtn" id="draftBtn" value="保存排序编号" /></td>
				<td colspan="5"><input type="button" name="saveBtn" id="saveBtn" value="发布顺序" style="text-align:left;" /></td>
			</tr>
		</tbody>
	</table>
</form>

<div id="loadingImg" style="display:none;">
	<img src="/images/loading.gif"/>资料载入中,请稍候...
</div>

<div id="productSelectWindow" style="display:none;"></div>